import clsx from "clsx";

const SKELETON_ROWS = [
  { mine: false, w: "58%" },
  { mine: false, w: "40%" },
  { mine: true, w: "52%" },
  { mine: false, w: "66%" },
  { mine: true, w: "34%" },
  { mine: false, w: "48%" },
];

function MessagesSkeleton() {
  return (
    <div className="scroll-thin flex-1 overflow-y-auto py-4 flex flex-col gap-3" aria-hidden="true">
      {SKELETON_ROWS.map((row, i) => (
        <div
          key={i}
          className={clsx("flex px-3 sm:px-4", row.mine ? "justify-end" : "justify-start")}
        >
          <div
            className="h-9 rounded-[14px] bg-surface border border-line-subtle animate-pulse"
            style={{ width: row.w }}
          />
        </div>
      ))}
    </div>
  );
}

window.MessagesSkeleton = MessagesSkeleton;